import React, { useState } from 'react';
// import cn from 'classnames';
import { Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';
// import styles from '@/pages/Organization/Hr/index.less';
// import colors from '@/theme';

const Gwfb = ({ data }) => {
    const [value, setValue] = useState([]);
    React.useEffect(() => {
        const v = [...data].sort((a, b) => b.value - a.value);
        if (v.length > 10) {
            let num = 0;
            v.slice(9, v.length - 1).map(item => {
                num += Number(item.value);
                return '';
            });
            const other = [
                {
                    name: '其他',
                    value: num
                }
            ];
            setValue(v.slice(0, 9).concat(other));
        } else {
            setValue(v);
        }
    }, [data]);

    if (!data || data.length === 0) {
        return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
    }
    return (
        // <div className={styles.gwgl}>
        <ReactEcharts
            option={{
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '50%',
                        center: ['50%', '50%'],
                        data: value,
                        label: {
                            normal: {
                                formatter: '{b}\n{c}人({d}%)'
                            }
                        },
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: 'rgba(0,0,0,.3)'
                                }
                            }
                        }
                    }
                ]
            }}
            style={{
                background: '#fff',
                flex: 1
            }}
        />
        // </div>
    );
};

export default Gwfb;
